<template>
	<view class="dp-menu" :style="{
		fontSize: params.fontsize * 2 + 'rpx',
		backgroundColor: params.bgcolor,
		margin: params.margin_y * 2.2 + 'rpx ' + params.margin_x * 2.2 + 'rpx 0',
		padding: params.padding_y * 2.2 + 'rpx ' + params.padding_x * 2.2 + 'rpx',
		borderRadius: params.boxradius * 2.2 + 'rpx'
	}">
		<view style="padding-top:16rpx;">
			<view v-if="params.showtitle == 1" class="menu-title"
				:style="{ color: params.titlecolor, fontSize: params.titlesize * 2.2 + 'rpx' }">{{ params.title }}
			</view>
			<block v-if="params.newdata.length > 1">
				<swiper :autoplay="false" :indicator-dots="false" :current="0" @change="bannerchange" :style="{
					width: '100%',
					height: (params.newdata_linenum * (params.iconsize * 2.2 + params.fontsize * 2 + 50) + 'rpx' || '350rpx'),
					overflow: 'hidden'
				}">
					<swiper-item v-for="item in params.newdata" :key="item.id">
						<view class="swiper-item" :style="{
							width: '100%',
							height: (params.newdata_linenum * (params.iconsize * 2.2 + params.fontsize * 2 + 50) + 'rpx' || '350rpx'),
							overflow: 'hidden'
						}">
							<view v-for="item2 in item" :key="item2.id"
								:class="'menu-nav' + params.num + ' ' + (params.showicon == 0 && params.showline == 1 ? ' showline' : '')"
								@click="goto" :data-url="item2.hrefurl">
								<image v-if="params.showicon == 1" :src="item2.imgurl"
									:style="{ borderRadius: params.radius / 2 + '%', width: params.iconsize * 2.2 + 'rpx', height: params.iconsize * 2.2 + 'rpx' }">
								</image>

								<button v-if="item.hrefurl == 'contact::'"
									:style="{ color: item.color, height: params.fontheight * 2.2 + params.iconsize * 2.2 + 'rpx', lineHeight: params.fontheight * 2.2 + 'rpx', width: '100%', position: 'absolute', top: '0rpx' }"
									open-type="contact" @click="goto" :data-url="params.hrefurl"></button>

								<view class="menu-text"
									:style="{ color: item2.color, height: params.fontheight * 2.2 + 'rpx', lineHeight: params.fontheight * 2.2 + 'rpx' }">
									{{ item2.text || '按钮文字' }}</view>
								<view class="menu-text" v-if="params.showtitle1 == 1"
									:style="{ color: item2.color1, fontSize: params.fontsize1 * 2.2 + 'rpx', height: params.fontheight1 * 2.2 + 'rpx', lineHeight: params.fontheight1 * 2.2 + 'rpx' }">
									{{ item2.text1 || '按钮文字' }}</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
				<view class="swiper-pagination" style="justify-content:center;bottom:8px">
					<block v-for="(item, index) in params.newdata" :key="item.id">
						<view v-if="bannerindex == index" class="swiper-shape4 swiper-shape4-active"
							style="background-color:#3db51e"></view>
						<view v-else class="swiper-shape4" style="background-color:#edeef0"></view>
					</block>
				</view>
			</block>
			<block v-else>
				<view class="swiper-item">
					<view v-for="item in data" :key="item.id"
						:class="'menu-nav' + params.num + ' ' + (params.showicon == 0 && params.showline == 1 ? ' showline' : '')"
						@click="goto" :data-url="item.hrefurl">
						<image v-if="params.showicon == 1" :src="item.imgurl"
							:style="{ borderRadius: params.radius / 2 + '%', width: params.iconsize * 2.2 + 'rpx', height: params.iconsize * 2.2 + 'rpx' }">
						</image>
						<button v-if="item.hrefurl == 'contact::'"
							:style="{ color: item.color, height: params.fontheight * 2.2 + params.iconsize * 2.2 + 'rpx', lineHeight: params.fontheight * 2.2 + 'rpx', width: '100%', position: 'absolute', top: '0rpx' }"
							open-type="contact" @click="goto" :data-url="params.hrefurl"></button>
						<view class="menu-text"
							:style="{ color: item.color, height: params.fontheight * 2.2 + 'rpx', lineHeight: params.fontheight * 2.2 + 'rpx' }">
							{{ item.text || '按钮文字' }}</view>
						<view class="menu-text" v-if="params.showtitle1 == 1"
							:style="{ color: item.color1, fontSize: params.fontsize1 * 2.2 + 'rpx', height: params.fontheight1 * 2.2 + 'rpx', lineHeight: params.fontheight1 * 2.2 + 'rpx' }">
							{{ item.text1 || '按钮文字' }}</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			"bannerindex": 0,
			fontLoaded: false
		}
	},
	props: {
		params: {},
		data: {}
	},
	mounted() {
		// this.downloadFont();, fontFamily: fontLoaded ? 'CustomFont' : ''
		// this.loadFont();
	},
	methods: {
		bannerchange: function (e) {
			var that = this
			var idx = e.detail.current;
			that.bannerindex = idx
		},
		downloadFont() {
			uni.downloadFile({
				url: 'https://fonts.gstatic.com/s/montserrat/v29/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw5aXo.woff2',
				success: (res) => {
					if (res.statusCode === 200) {
						this.loadFont(res.tempFilePath);
					}
				}
			});
		},

		loadFont(path) {
			// uni.loadFontFace({
			// 	family: 'CustomFont',
			// 	source: 'url("https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250403/318b41438cd576467d5d67fbcb9641e9.OTF")',
			// 	success() {
			// 		console.log('success')
			// 	},
			// 	fail: (err) => {
			// 		console.error(err);
			// 		uni.showToast({ title: '字体加载失败', icon: 'none' });
			// 	}
			// })
			// return;

			// #ifdef MP-WEIXIN
			wx.loadFontFace({
				family: 'CustomFont',
				global: true,
				source: "https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250403/318b41438cd576467d5d67fbcb9641e9.OTF",
				success: () => {
					this.fontLoaded = true;
					console.log({ title: '字体加载成功' });
				},
				fail: (err) => {
					console.error(err);
					uni.showToast({ title: '字体加载失败', icon: 'none' });
				}
			});
			// #endif

			// #ifndef MP-WEIXIN
			console.log('当前平台不支持动态加载字体')
			// uni.showToast({ title: '当前平台不支持动态加载字体', icon: 'none' });
			// #endif
		}
	}
}
</script>
<style>
.dp-menu {
	height: auto;
	position: relative;
	padding-left: 20rpx;
	padding-right: 20rpx;
	/* background: #fff; */
}

.dp-menu .menu-title {
	width: 100%;
	font-size: 30rpx;
	color: #333333;
	font-weight: bold;
	padding: 0 0 32rpx 24rpx
}

.dp-menu .swiper-item {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	height: auto;
	overflow: hidden;
	align-items: flex-start;
}

.dp-menu .menu-nav {
	flex: 1;
	text-align: center;
}

.dp-menu .menu-nav5 {
	width: 20%;
	text-align: center;
	margin-bottom: 16rpx;
	position: relative
}

.dp-menu .menu-nav4 {
	width: 25%;
	text-align: center;
	margin-bottom: 16rpx;
	position: relative
}

.dp-menu .menu-nav3 {
	width: 33.3%;
	text-align: center;
	margin-bottom: 16rpx;
	position: relative
}

.dp-menu .menu-nav2 {
	width: 50%;
	text-align: center;
	margin-bottom: 16rpx;
	position: relative
}

.dp-menu .showline:after {
	position: absolute;
	top: 50%;
	right: 0;
	margin-top: -16rpx;
	content: '';
	height: 36rpx;
	border-right: 1px solid #eee
}

.dp-menu .menu-nav2.showline:nth-child(2n+2):after {
	border-right: 0
}

.dp-menu .menu-nav3.showline:nth-child(3n+3):after {
	border-right: 0
}

.dp-menu .menu-nav4.showline:nth-child(4n+4):after {
	border-right: 0
}

.dp-menu .menu-nav5.showline:nth-child(5n+5):after {
	border-right: 0
}

.swiper-pagination {
	padding: 0 10px;
	bottom: 12px;
	left: 0;
	position: absolute;
	display: flex;
	justify-content: center;
	width: 100%
}

.swiper-shape0 {
	width: 3px;
	height: 3px;
	margin: 0 2px !important;
}

.swiper-shape0-active {
	width: 13px;
	border-radius: 1.5px;
}

.swiper-shape1 {
	width: 12px;
	height: 6px;
	border-radius: 0;
	margin: 0 2px
}

.swiper-shape2 {
	width: 8px;
	height: 8px;
	border-radius: 0;
	margin: 0 2px
}

.swiper-shape3 {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin: 0 2px;
}

.swiper-shape4 {
	width: 8px;
	height: 3px;
	border-radius: 50%;
	margin: 0 1px;
}

.swiper-shape4-active {
	width: 13px;
	border-radius: 1.5px;
}
</style>